<template>
  <!-- 新增录入画面对话框-->
  <el-dialog
    :title="title"
    center
    :visible.sync="openState"
    width="1024px"
    :close-on-click-modal="false"
  >
    <el-form ref="editForm" :model="form" label-width="110px" disabled>
      <!--交易础信息-->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>交易基础信息</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="交易流水号" prop="id">
              <el-input v-model="form.id"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="明细标识号" prop="dtlNo">
              <el-input v-model="form.dtlNo"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包批次号" prop="btId">
              <el-input v-model="form.btId"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="报文标识号" prop="pkgId">
              <el-input v-model="form.pkgId"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行内流水号" prop="internalId1">
              <el-input v-model="form.internalId1"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账户类型" prop="custflag1">
              <el-select v-model="form.custflag1" placeholder="账户类型">
                <el-option
                  v-for="dict in dictMap.CUST_FLAG1"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="CPG日期" prop="cpgdate">
              <el-date-picker v-model="form.cpgdate" style="width: 100%;" type="date" value-format="yyyyMMdd"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工作日期" prop="workdate">
              <el-date-picker v-model="form.workdate" style="width: 100%;" type="date" value-format="yyyyMMdd"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="记账标志" prop="cbflag">
              <el-select v-model="form.cbflag" placeholder="记账标志">
                <el-option
                  v-for="dict in dictMap.CBFLAG"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="交易渠道" prop="source">
              <el-select v-model="form.source" placeholder="柜面交易">
                <el-option
                  v-for="dict in dictMap.TXN_SOURCE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务类型" prop="bizTypeCode">
              <el-select v-model="form.bizTypeCode" placeholder="业务类型">
                <el-option
                  v-for="dict in dictMap.BIZ_TYPE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务种类" prop="bizCtgyCode">
              <el-select v-model="form.bizCtgyCode" placeholder="业务种类">
                <el-option
                  v-for="dict in dictMap.BIZ_CTGY"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="原交易流水号" prop="oriId">
              <el-input v-model="form.oriId" placeholder="原交易流水号" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!--          <el-col :span="8">-->
          <!--            <el-form-item label="业务状态" prop="status">-->
          <!--              <el-select v-model="form.status" placeholder="业务状态">-->
          <!--                <el-option-->
          <!--                  v-for="dict in dictMap.CP2_STATUS"-->
          <!--                  :key="dict.value"-->
          <!--                  :label="`${dict.value}-${dict.text}`"-->
          <!--                  :value="dict.value"-->
          <!--                ></el-option>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
<!--          <el-col :span="8">
            <el-form-item label="交易渠道" prop="transSource">
              <el-input v-model="form.transSource" :disabled="true" placeholder="柜面交易" style="width: 195px"/>
            </el-form-item>
          </el-col>-->
<!--          <el-col :span="8">
            <el-form-item label="交易币种" prop="curCd">
              <el-input v-model="form.curCd" placeholder="人民币-CNY" :disabled="true" style="width: 195px"/>
            </el-form-item>
          </el-col>-->
        </el-row>
      </el-card>

      <!--付款人信息-->
      <el-card class="form-card payerInfo-card">
        <div slot="header" class="label-header-msg">
          <span>付款人信息</span>
        </div>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="付款人账号" prop="payerActno">
              <el-input
                v-model="form.payerActno"
                placeholder="付款人账号"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="付款人名称" prop="payerName">
            <el-input v-model="form.payerName" placeholder="付款人名称" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="付款人地址" prop="payerAddr">
            <el-input v-model="form.payerAddr" placeholder="付款人地址" />
          </el-form-item>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="grid-payer">
              <el-form-item label="付款行行号" prop="payerBrno">
                <el-input
                  v-model="form.payerBrno"
                  placeholder="付款行行号"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="13">
            <el-form-item label="付款行行名" prop="payerBrname" label-width="130px">
              <el-input v-model="form.payerBrname" placeholder="付款行行名" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="grid-payer">
              <el-form-item label="付款人开户行号" prop="payerAccBrno">
                <el-input
                  v-model="form.payerAccBrno"
                  placeholder="付款人开户行行号"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="13">
            <el-form-item label="付款人开户行行名" prop="payerAccBrname" label-width="130px">
              <el-input v-model="form.payerAccBrname" placeholder="付款人开户行行名" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!--收款人信息-->
      <el-card class="form-card payeeInfo-card">
        <div slot="header" class="label-header-msg">
          <span>收款人信息</span>
        </div>
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="grid-payee">
              <el-form-item label="收款人账号" prop="payeeActno">
                <el-input
                  v-model="form.payeeActno"
                  placeholder="收款人账号"
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-form-item label="收款人名称" prop="payeeName">
          <el-input v-model="form.payeeName" placeholder="收款人名称" />
        </el-form-item>
        <el-form-item label="收款人地址" prop="payeeAddr">
          <el-input v-model="form.payeeAddr" placeholder="收款人地址" />
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="grid-payee">
              <el-form-item label="收款行行号" prop="payeeBrno">
                <el-input
                  v-model="form.payeeBrno"
                  placeholder="收款行行号"
                />
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="13">
            <el-form-item label="收款行行名" prop="payeeBrname" label-width="130px">
              <el-input v-model="form.payeeBrname" placeholder="收款行行名" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="grid-payee">
              <el-form-item label="收款人开户行号" prop="payeeAccBrno">
                <el-input
                  v-model="form.payeeAccBrno"
                  placeholder="收款人开户行行号"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="13">
            <el-form-item label="收款人开户行行名" prop="payeeAccBrname" label-width="130px">
              <el-input v-model="form.payeeAccBrname" placeholder="收款人开户行行名" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!--其他信息-->
      <el-card class="form-card payOtherInfo-card">
        <div slot="header" class="label-header-msg">
          <span>其他交易信息</span>
        </div>
        <el-row type="flex" :gutter="10">
          <el-col :span="11">
            <el-form-item label="交易货币" prop="curcd">
              <el-input v-model="form.curcd" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="12">
            <el-form-item label="金额" prop="amount" label-width="130px">
              <ht-amount-input v-model="form.amount" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-otherInfo">
              <el-form-item label="附言" prop="remarks">
                <el-input type="textarea" v-model="form.remarks" placeholder="附言" maxlength="210" show-word-limit />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-form ref="queryDetailForm121" :model="form" label-width="110px" :disabled="true">
        <query-detail-inter-info
          ref="detailInterInfo"
          :dataDetail="this.form"
          :dictMap="dictMap"
        ></query-detail-inter-info>
      </el-form>
      <!--附加信息域 根据业务类型，动态显示或隐藏-->
      <el-card class="form-card payAddInfo-card" v-show="this.form.bizTypeCode === 'A104'">
        <div slot="header" class="label-header-msg">
          <span>国库资金贷记划拨附加数据</span>
        </div>
        <el-row>
          <el-col :span="12">
            <div class="grid-payAddInfo">
              <el-form-item label="上报国库代码" prop="reportCode" label-width="110px">
                <el-input v-model="form.reportCode" placeholder="上报国库代码" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-payAddInfo">
              <el-form-item label="接收国库代码" prop="receiveCode" label-width="110px">
                <el-input v-model="form.receiveCode" placeholder="接收国库代码" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-payAddInfo">
              <el-form-item label="报表日期" prop="reportDate" label-width="110px">
                <el-date-picker
                  v-model="form.reportDate"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  value-format="yyyyMMdd"
                ></el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-payAddInfo">
              <!--当业务类型为委托收款（划回）、托收承付（划回）时，“端到端标识号”中填写的“票据号码/凭证号码”规则为只填写16位票据号码-->
              <el-form-item label="报表序号" prop="reportNo" label-width="110px">
                <el-input v-model="form.reportNo" placeholder="报表序号" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="预算级次" prop="budgetLevel">
              <el-select v-model="form.budgetLevel" placeholder="预算级次">
                <el-option
                  v-for="dict in dictMap.BUDGETLEVELCODE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调整期标志" prop="indicatorCode">
              <el-select v-model="form.indicatorCode" placeholder="调整期标志">
                <el-option
                  v-for="dict in dictMap.INDICATOR_CODE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="预算种类" prop="budgetType">
              <el-select v-model="form.budgetType" placeholder="预算种类">
                <el-option
                  v-for="dict in dictMap.BUDGETTYPECODE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="form-card payAddInfo-card" v-show="this.form.bizTypeCode === 'A104'">
        <div slot="header" class="label-header-msg">
          <span>明细列表</span>
        </div>
        <el-row>
          <el-col :span="12">
            <div class="grid-payAddInfo">
              <el-form-item label="明细条数" prop="dtlNum" label-width="110px">
                <el-input v-model="form.dtlNum" placeholder="明细条数" disabled />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-payAddInfo">
              <el-form-item label="明细汇总金额币种" prop="dtlCurcd" label-width="110px">
                <el-input v-model="form.dtlCurcd" placeholder="明细汇总金额币种" disabled />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-payAddInfo">
              <el-form-item label="明细汇总金额" prop="dtlAmount" label-width="110px">
                <el-input v-model="form.dtlAmount" placeholder="明细汇总金额" disabled />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-card payAddInfo-card" v-show="this.form.bizTypeCode === 'A307'">
        <div slot="header" class="label-header-msg">
          <span>国库资金国债兑付贷记划拨附加数据</span>
        </div>
        <el-row>
          <el-col :span="12">
            <div class="grid-payAddInfo">
              <el-form-item label="上报国库代码" prop="reportCode" label-width="110px">
                <el-input v-model="form.reportCode" placeholder="票据号码" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-payAddInfo">
              <el-form-item label="接收国库代码" prop="receiveCode" label-width="110px">
                <el-input v-model="form.receiveCode" placeholder="票据号码" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-payAddInfo">
              <el-form-item label="报表日期" prop="reportDate" label-width="110px">
                <el-date-picker
                  v-model="form.reportDate"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  value-format="yyyyMMdd"
                ></el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-payAddInfo">
              <!--当业务类型为委托收款（划回）、托收承付（划回）时，“端到端标识号”中填写的“票据号码/凭证号码”规则为只填写16位票据号码-->
              <el-form-item label="报表序号" prop="reportNo" label-width="110px">
                <el-input v-model="form.reportNo" placeholder="票据号码" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="form-card payAddInfo-card" v-show="this.form.bizTypeCode === 'A307'">
        <div slot="header" class="label-header-msg">
          <span>明细列表</span>
        </div>
        <el-row>
          <el-col :span="12">
            <div class="grid-payAddInfo">
              <el-form-item label="明细条数" prop="dtlNum" label-width="110px">
                <el-input v-model="form.dtlNum" placeholder="明细条数" disabled />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-payAddInfo">
              <el-form-item label="明细汇总金额币种" prop="dtlCurcd" label-width="110px">
                <el-input v-model="form.dtlCurcd" placeholder="明细汇总金额币种" disabled />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-payAddInfo">
              <el-form-item label="明细汇总金额" prop="dtlAmount" label-width="110px">
                <el-input v-model="form.dtlAmount" placeholder="明细汇总金额" disabled />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <div class="discountReceipt-pick-operate-box">
        <div class="operate-box-bottom-paging">
          <div class="bottom-content">
            <ht-table
              ref="dataTable104"
              :showSerialNumber="false"
              :multi-select="false"
              :tableBindColumns="tableBindColumns1"
              :initData="false"
              :reqConfig="reqConfig104"
              :queryParams="queryParams"
              v-show="this.form.bizTypeCode === 'A104'"
            >
            </ht-table>
            <ht-table
              ref="dataTable307"
              :showSerialNumber="false"
              :multi-select="false"
              :tableBindColumns="tableBindColumns2"
              :initData="false"
              :reqConfig="reqConfig307"
              :queryParams="queryParams"
              v-show="this.form.bizTypeCode === 'A307'"
            >
            </ht-table>
          </div>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { apiUrlConfigA104,apiUrlConfigA307, detail } from "@/api/cnaps/baseBiz/send/sendCommon.js";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import PayeeDialog from "@/views/components/PayeeDialog";
import PayerDialog from "@/views/components/PayerDialog";
import HtAmountInput from "@/views/components/HtAmountInput";
import HtAmountUpper from "@/views/components/HtAmountUpper";
import QueryDetailInterInfo from "@/views/cnaps/baseBiz/send/components/queryDetailInterInfo.vue";

export default {
  name: "EditInfo",
  components: {
    QueryDetailInterInfo,
    PayeeDialog,
    PayerDialog,
    BankBranchDialog,
    HtAmountInput,
    HtAmountUpper,
  },
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      reqConfig307:apiUrlConfigA307,
      reqConfig104:apiUrlConfigA104,
      queryParams: {
        id: "",
      },
      tableBindColumns1: [
        { label: `征收机关大类代码`, prop: "deptCode",  align: "center", dictCode: "DEPT_CODE" },
        {
          label: `预算科目代码`,
          prop: "subjectCode",
          align: "center",
        },
        {
          label: `发生额`,
          prop: "amount",
          align: "center",
          type: "price",
        },
      ],
      tableBindColumns2: [
        {
          label: `兑付国债银行大类`,
          prop: "debtBankType",

          align: "center",
          dictCode: "DEBT_BANK_TYPE",
        },
        {
          label: `本金代码`,
          prop: "capitalCode",

          align: "center",
        },
        {
          label: `本金金额`,
          prop: "capitalAmount",

          align: "center",
          type: "price",
        },
        {
          label: `利息代码`,
          prop: "accrualCode",

          align: "center",
        },
        {
          label: `利息金额`,
          prop: "accrualAmount",

          align: "center",
          type: "price",
        },
      ],
      busTypeList: [],
      id: "",
      title: "",
      pkgNo: "",
      // 是否显示弹出层
      openState: false,
      ifShowDelBtn: false,

      // 字段可编辑控制

      // 表单参数
      form: {},
      formData: {},
      // 表单校验
    };
  },
  mounted() {},
  methods: {
    // 表单重置
    reset() {
      this.resetForm("editForm");
      this.$set(this, "form", {});
    },
    // 关闭回掉
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.reset();
          done();
        })
        .catch((_) => {});
    },


    show(id = "", pkgNo = "") {
      this.reset();
      this.pkgNo = pkgNo;
      this.id = id;
      this.form.dtlNum = 0;
      this.form.curcd = "CNY";
      this.form.amount = 0.0;
      this.form.dtlCurcd = "CNY";
      this.form.dtlAmount = 0.0;
      this.title = "小额金融机构发起贷记明细";
      this.openState = true;
      this.ifShowDelBtn = false;

      if (id) {
        this.title = "小额金融机构发起贷记明细";
        this.ifShowDelBtn = true;

        // 如果传了ID 这里查询一个已经存在的数据
        detail({
          coreId: this.id,
          pkgNo: this.pkgNo,
        }).then((res) => {
          console.log(res.result.detail6410DataModel, 1111);
          this.$set(this, "form", res.result.detail6410DataModel);
          this.$set(this.queryParams, "id", this.form.id);
          this.$nextTick(() => {
            this.$refs.dataTable104.doQuery(true);
            this.$refs.dataTable307.doQuery(true);
          });
        });
      }
    },
    /** 明细按钮操作 */
    handleAction(type, row, index) {
      switch (type) {
        case "maintain":
          this.formData = _.clone(row);
          this.formData.isUpdate = true;
          this.formData.index = index;
          if (this.form.bizTypeCode == "A104") {
            this.$refs.table104Dialog.show();
          }
          if (this.form.bizTypeCode == "A307") {
            this.$refs.table307Dialog.show();
          }
          break;
      }
    },


    cancel() {
      this.openState = false;
      this.reset();
      this.$emit("editComplete", false);
    },
  },
};
</script>
<style>
.label-header-msg {
  font-weight: bold;
}

.form-card {
  margin-bottom: 10px;
}
</style>
